@media all and (max-height:800px) and (max-width:840px) {
    .large-view-pic{
        max-height:200px;
    }
}
@media all and (max-width: 540px) and (min-width:360px){
    #navbar{
        @include flex-container(column,nowrap,flex-start,center);
        @include transition(all 0.3s ease);
        height:2.4em;
        position:relative;
        #nav-links{
            display:none;
        }
        &:hover{
            height:auto;
            padding:{
                top:0.5em;
                bottom:0.5em;
            }
            #nav-links{
                @include flex-element(0,1,auto);
                @include flex-container(row,wrap,center,strech);
                text-align:center;
                width:100%;
                padding-bottom:0.5em;
            }
        }
    }
    #title{
        @include flex-element(1,0,auto);
        width:auto;
        margin-bottom:1em;
        padding-top:0.5em;
    }

    #content{
        @include flex-container(column,wrap,center,center);
    }

    .large-view-pic{
        max-height:200px;
    }
    .small-view{
        img{
            max-height:40px;
            margin:{
                left:0.5em;
                right:0.5em;
            }
        }
    }
}


@media all and (max-width:360px){
    #navbar{
        @include flex-container(column,nowrap,flex-start,strech);
        @include transition(all 0.4s ease);
        height:2.4em;
        position:relative;
        #nav-links{
            text-align:center;
            padding-bottom:0.5em;
            display:none;
            a{
                @include flex-element(1,0,auto);
                width:auto;
                line-height:2em;
            }
        }
        &:hover{
            height:auto;
            padding:{
                top:0.5em;
                bottom:0em;
            }
            #nav-links{
                @include flex-element(1,0,auto);
                @include flex-container(column,nowrap,center,strech);
            }
        }
    }

    #title{
        @include flex-element(1,0,1);
        width:auto;
        margin-bottom:1em;
        padding-top:0.5em;
    }

    .large-view-pic{
        height:120px;
    }
    #small-view-container{
        @include flex-container(row,wrap,center,center);
        @include flex-element(0,0,2);
    }
    .small-view{
        @include flex-element(1,0,1);
        @include transition(background 0.2s ease-in 0.1s);
        text-align:center;
        width:50%;
        padding:1em 0;
        img{
            display:none;
        }
        &:hover{
            box-shadow:inset 0 0 3px black;
        }
        &.active{
            order:-1;
        }
    }
}

@media only screen  and (max-device-width: 1080px),handheld{
    //for mobile device
    #content{
    .summary{
        h1{
            color: rgba(148, 213, 255, 1);
            text-shadow: 0 0 1px rgba(255,255,255,1),0px 0px 5px rgba(38, 170, 255,1);
            @include transform(rotateX(360deg));
        }
        h2{
            color: white;
        }
        h2:after{
            @include transform(translate3d(0em,0,0) rotateX(0deg));
            opacity:1;
            @include animation(arrowflash 1.6s 1.6s infinite);
        }
    }
    }
}
@media only screen and (min-device-width: 531px) and (max-device-width: 1080px){
    .summary h1,#content:hover h1{
        font-size:2.2em !important;
        margin:0.2em 0;
    }
    .summary{
        h2{
            font-size:1.5em;
            margin:0.2em 0;
        }
    }
    .large-view-pic{
        height:110px;
    }
}
@media only screen and (max-device-width: 530px){
    .summary h1,#content:hover h1{
        font-size:1.3em !important;
        margin:0.2em 0;
    }
    .summary{
        h2{
            font-size:1em;
            margin:0.2em 0;
        }
    }
    .large-view-pic{
        height:80px;
    }
}